import React, {useEffect, useRef, useState} from 'react';
import * as echarts from 'echarts';
import {reqGetShoppingSales} from "../../../../api/backStage/echarts";


const ShoppingChart = () => {
    const chartRef = useRef(null);
    const [echartsArr, setEchartsArr] = useState([])
    let option = {
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 28,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: echartsArr,
                type: 'bar'
            }
        ]
    }


    //获取商品销售额度
    useEffect(() => {
        const getData = async () => {
            const result = await reqGetShoppingSales()
            const {data} = result
            const salesByMonth = data.reduce((data, item) => {
                const {month, total_price} = item;
                // data[month] = (data[month] || 0) + total_price;
                const monthName = `${parseInt(month.substring(month.lastIndexOf("-") + 1))}月`
                data[monthName] = (data[monthName] || 0) + total_price;
                return data;
            }, {})
            const xAxisData = Array.from({length: 12}).map((_, index) => `${index + 1}月`)

            // 生成 y 轴每个月份的销售额
            const seriesData = xAxisData.map(monthName => salesByMonth[monthName] || 0);
            // console.log(salesByMonth)
            // console.log(xAxisData)
            // console.log(seriesData)
            setEchartsArr(seriesData)
            // console.log(result.data)
            // const arr = []
            // for (let i = 0; i < result.data.length; i++) {
            //     const {month, total_price} = result.data[i]
            //     if (arr[month]) {
            //         arr[month] += total_price;
            //     } else {
            //         arr[month] = total_price;
            //     }
            // }
            // const objArr = Object.entries(arr).map(([key, value]) => ({name: key, value: value}));
            // // console.log(objArr)
            // setEchartsArr(objArr);
        };
        getData()
    }, [])


    useEffect(() => {
        if (chartRef.current && echartsArr.length > 0) {
            const myChart = echarts.init(chartRef.current);
            myChart.setOption(option);
        }
    }, [option, echartsArr]);

    return (
        <div>
            <h1>商品销售额</h1>
            <div>
                <div ref={chartRef} style={{width: 1600, height: 500}}></div>
            </div>
        </div>
    );
};

export default ShoppingChart;